<template>
	<view class="create-invoice-layout">
		<xh-input title="开票金额" placeholder="请输入金额" showTitle minWidth="160rpx" v-model="formParams.money"></xh-input>
		<xh-input title="发票号码" placeholder="请输入发票号码" showTitle minWidth="160rpx" v-model="formParams.code"></xh-input>
		<xh-input title="开票日期" placeholder="请选择日期" showTitle minWidth="160rpx" isSelect @didSelect="showSelectDate" v-model="formParams.date"></xh-input>
		<xh-header title="发票照片" color="#333333"></xh-header>
		<view class="create-invoice-image">
			<xh-upload-credentials text="上传发票照片或者电子图片" v-model="formParams.image"></xh-upload-credentials>
		</view>
		<xh-header title="示例" color="#333333"></xh-header>
		<view class="create-invoice-image-sl">
			<image src="/static/my/invoice_demo@2x.png" mode="widthFix"></image>
		</view>
		<view class="submit-btn" style="margin-top: 50rpx;" @tap="submit">提交</view>
		<uv-datetime-picker ref="datePicker" v-model="selectDateValue" mode="date" @confirm="confirm"></uv-datetime-picker>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { ref } from 'vue'
	import { creayeInvoiceOrder } from '@/common/api/api.js'
	
	const formParams = ref({
		money: '',
		code: '',
		date: '',
		image: ''
	})
	const selectDateValue = ref(Number(new Date()))
	const datePicker = ref(null)
	// 选择日期
	const showSelectDate = () => {
		datePicker.value.open()
	}
	// 选择日期回调
	const confirm = (res) => {
		selectDateValue.value = res.value
		formParams.value.date = dayjs(selectDateValue.value).format('YYYY-MM-DD')
	}
	// 提交
	const submit = async ()=>{
		if(uni.$uv.test.empty(formParams.value.money)){
			uni.$utils.showToast('请输入开票金额')
			return
		}
		else if((parseFloat(formParams.value.money) || 0) <= 0){
			uni.$utils.showToast('输入的开票金额必须大于0')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.code)){
			uni.$utils.showToast('请输入发票号码')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.date)){
			uni.$utils.showToast('请选择开票日期')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.image)){
			uni.$utils.showToast('请上传发票照片')
			return
		}
		let params = {}
		params.invoiceAmount = formParams.value.money
		params.invoiceCode = formParams.value.code
		params.invoiceMonth = formParams.value.date
		params.picUrl = formParams.value.image
		await creayeInvoiceOrder(params)
		uni.$utils.showToast('开票录入成功')
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.create-invoice-layout {
		padding: 20rpx 0 100rpx;
		.create-invoice-image {
			background-color: #fff;
			margin: 0 30rpx;
		}

		.create-invoice-image-sl {
			padding: 0 60rpx;
		}
	}
</style>